<template>
	<view class="container" :style="{ width: `${windowsW}px`, height: `${windowsH}px` }">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="logo" @click="handleMap">
				<image src="/static/logo.png" mode="aspectFit"></image>
			</view>
			<view class="nav-items">
				<view class="nav-item" :class="{ active: currentTab === 'home' }" @click="switchTab('home')">首页</view>
				<view class="nav-item" :class="{ active: currentTab === 'about' }" @click="switchTab('about')">关于我们</view>
				<view class="nav-item" :class="{ active: currentTab === 'products' }" @click="switchTab('products')">产品服务</view>
				<view class="nav-item" :class="{ active: currentTab === 'news' }" @click="switchTab('news')">新闻动态</view>
				<view class="nav-item" :class="{ active: currentTab === 'contact' }" @click="switchTab('contact')">联系我们</view>
			</view>
			<view class="login">
				<view v-if="!islogin" @click="hangdleLogin" class="login_btn">登录/注册</view>
				<view v-else class="login_info">
					<view class="">
						<image src="/static/logoS.png" mode="aspectFit"></image>
					</view>
					<view class="username-container">
						<view class="username" @click.stop>
							<text>{{ userInfo.username }}</text>
							<uni-icons type="down" size="20" color="#165dff" @click="popshow"></uni-icons>
							<!-- 弹窗 - 定位在用户名下方 -->
							<view class="popup" v-if="popupshow">
								<view class="popup_item" @click="handerUserInfo">修改资料</view>
								<view class="popup_item" @click="loginout">退出</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y="true" :scroll-into-view="currentTab" :show-scrollbar="false" :style="{ height: `${windowsH}px` }">
			<!-- 轮播图 -->
			<swiper class="banner" indicator-dots autoplay interval="5000" duration="1000" id="home">
				<swiper-item v-for="(item, index) in ltdpic" :key="index">
					<image :src="item.url" mode="aspectFill"></image>
				</swiper-item>
			</swiper>

			<view class="about-section" id="about">
				<view class="section-title">云仓集配</view>
				<view class="section-content">
					<image src="/static/product/y1.png" mode="aspectFill"></image>
					<view class="about-text">
						<view class="about-title">智链千企 云擎仓运</view>
						<view class="about-desc">
							15年来我们深耕智慧物流顶层设计及核心系统研发，打造集智能仓储（WMS/WCS/TMS）、自动化调度、资源协同与数据分析于一体的平台体系。关键技术自主可控，成功应用于企业供应链优化与政府物流枢纽建设，实现从战略规划到高效运营的全栈式技术赋能。
						</view>
						<view class="about-desc">
							深耕物流仓储智能系统与流通消费场景应用开发，服务超1000家政企客户。
							<br />
							► 政府基建：赋能10+省市级智慧物流枢纽建设
							<br />
							► 头部企业：打造世界500强供应链数字化底座
							<br />
							► 行业赋能：驱动仓储服务商运营提效30%+
							<br />
							► 定制开发：交付200+敏捷适配的2B2C系统 —— 以软硬一体解决方案，重构物流效率与消费体验。
						</view>
						<view class="more-btn">了解更多</view>
					</view>
				</view>
			</view>

			<!-- 产品服务 -->
			<view class="products-section" id="products">
				<view class="section-title">选择服务</view>
				<view class="products-container">
					<view class="product-card">
						<image src="/static/product/c5.png" mode="aspectFill"></image>
						<view class="product-title">
							<view class=""><text>仓配服务商</text></view>
							<view class="btn_box" :class="{'btncolor':btnStatus.wms}" @click="handleBtn('wms')">{{ islogin ? (btnStatus.wms ? '仓配商登录' : '仓配注册') : '请先登录' }}</view>
						</view>
						<view class="product-desc">坐拥海量货源不愁单，智能托管省人工，高效运营结算快，平台赋能稳赚钱！</view>
					</view>
					<view class="product-card">
						<image src="/static/product/h3.png" mode="aspectFill"></image>
						<view class="product-title">
							<view class=""><text>货主用户</text></view>
							<view class="btn_box" :class="{'btncolor':btnStatus.ums}" @click="handleBtn('ums')">{{ islogin ? (btnStatus.ums ? '货主登录' : '货主注册') : '请先登录' }}</view>
						</view>
						<view class="product-desc">托管无忧，省钱省心：仓储安全、物流多选、准时送达、丢失即赔、系统对接、金融赋能！</view>
					</view>
					<view class="product-card">
						<image src="/static/product/y5.png" mode="aspectFill"></image>
						<view class="product-title">
							<view class=""><text>运营商</text></view>
							<view class="btn_box" :class="{'btncolor':btnStatus.operator}" @click="handleBtn('operator')">{{ islogin ? (btnStatus.operator ? '运营商登录' : '运营商注册') : '请先登录' }}</view>
						</view>
						<view class="product-desc">一站式云仓平台体系：整合资源、智能驱动，赋能企业供应链升级，夯实政府物流新基建！</view>
					</view>
				</view>
			</view>

			<!-- 新闻动态 -->
			<view class="news-section" id="news">
				<view class="section-title">新闻动态</view>
				<view class="news-container">
					<view class="news-item">
						<image src="/static/product/c6.png" mode="aspectFill"></image>
						<view class="news-content">
							<view class="news-title">硬件：密集阵仓储设备上市</view>
							<view class="news-date">2025-06-15</view>
							<view class="news-desc">大幅节省40%仓储面积，提高2.5倍人效</view>
						</view>
					</view>
					<view class="news-item">
						<image src="/static/product/h7.png" mode="aspectFill"></image>
						<view class="news-content">
							<view class="news-title">仓储监管规模突破百亿</view>
							<view class="news-date">2025-05-28</view>
							<view class="news-desc">为大型国央企、供应链金融机构动产监管业务大面积展开。</view>
						</view>
					</view>
				</view>
				<view class="more-btn">查看更多</view>
			</view>

			<!-- 联系我们 -->
			<view class="contact-section" id="contact">
				<view class="section-title">联系我们</view>
				<view class="contact-container">
					<view class="contact-info">
						<view class="contact-item">
							<view class="contact-icon">
								<uni-icons type="shop" color="white" size="25"></uni-icons>
							</view>
							<view class="contact-text">福建省福州市高新区中青科研中心19楼</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">
								<uni-icons type="phone" color="white" size="25"></uni-icons>
							</view>
							<view class="contact-text">0591-22212107</view>
						</view>
						<view class="contact-item">
							<view class="contact-icon">
								<uni-icons type="email" color="white" size="25"></uni-icons>
							</view>
							<view class="contact-text">contact@wqblb.com</view>
						</view>
					</view>
					<view class="contact-form">
						<view class="form-title">留言咨询</view>
						<input type="text" v-model="contact.name" placeholder="您的姓名" class="form-input" />
						<input type="text" v-model="contact.telephone" placeholder="联系电话" class="form-input" />
						<textarea v-model="contact.content" placeholder="留言内容" class="form-textarea"></textarea>
						<button class="submit-btn" @click="handleFeed">提交</button>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 页脚 -->
		<view class="footer">
			<view class="footer-content">
				<view class="footer-nav">
					<view class="footer-nav-item" @click="switchTab('home')">首页</view>
					<view class="footer-nav-item" @click="switchTab('about')">关于我们</view>
					<view class="footer-nav-item" @click="switchTab('products')">产品服务</view>
					<view class="footer-nav-item" @click="switchTab('news')">新闻动态</view>
					<view class="footer-nav-item" @click="switchTab('contact')">联系我们</view>
				</view>
			</view>
			<view class="copyright" @click="handleMap">copyright 2025 福建便利宝电子有限公司 版权所有;闽ICP备14017838号</view>
			<view class="copyright">Operation 2025 福建清市惠农电子商有限公司 运营管理</view>
		</view>
	</view>
</template>

<script>
import { store, mutations } from '../../uni_modules/uni-id-pages/common/store';
const cloudDB = uniCloud.importObject('getDb');
import { errForm, checkTelePhone } from '../../untils/errForm';
export default {
	data() {
		return {
			popupshow: false,
			count: 0,
			mapclick: 0,
			windowsH: 0,
			windowsW: 0,
			bussinessType: ['wms', 'ums', 'operator'],
			btnStatus: { wms: null, ums: null, operator: null },
			currentTab: 'home',
			pickerValue: ['修改资料', '退出'],
			contact: {
				name: '',
				telephone: '',
				content: ''
			},
			regUrls: { wms: '/pages/reg_warehouse/reg_warehouse', ums: '/pages/reg_supplier/reg_supplier', operator: '/pages/reg_operator/reg_operator' },

			ltdpic: [
				{
					url: '/static/product/c5.png'
				},
				{
					url: '/static/product/c1.png'
				},
				{
					url: '/static/product/c2.png'
				},
				{
					url: '/static/product/c3.png'
				},
				{
					url: '/static/product/y1.png'
				},
				{
					url: '/static/product/y3.png'
				}
			]
		};
	},

	computed: {
		userInfo() {
			return store.userInfo;
		},
		islogin() {
			console.log('islong', store.hasLogin);
			return store.hasLogin;
		}
	},

	async mounted() {
		uni.onWindowResize((res) => {
			this.windowsH = res.size.windowHeight;
			this.windowsW = res.size.windowWidth;
		});
		await this.isType();
		console.log('我的ID',JSON.stringify(this.userInfo));
	},

	onShow() {
		const _this = this;
		uni.getSystemInfo({
			success(res) {
				console.log(res.safeArea.bottom);
				_this.windowsH = res.safeArea.bottom;
				_this.windowsW = res.safeArea.right;
			}
		});
	},
async	onLoad(res) {
	console.log("首页参数",res);
	if(res?.type==='ycjg'){
		if(!res.uid){
			uni.showToast({
				title:'未授权'
			})
			return
		}
		uni.navigateTo({
			url:`/pages/ycjg/ycjg?uid=${res.uid}`
		})
	}else if(res?.tab !== undefined && res.tab !== null) {
			this.$nextTick(() => {
				this.currentTab = res.tab;
			});
		}

	const a=await cloudDB.getMe()
	console.log(a);
		
},

	methods: {
		//超级管理员点击管理
		handleMap() {
			const _this = this;
			this.mapclick++;
			if (this.mapclick === 7) {
				uni.navigateTo({
					url:'/pages/admin/admin'
				})
				// uni.navigateTo({
				// 	url: '/pages/map/map',
				// 	success() {
				// 		_this.mapclick = 0;
				// 	}
				// });
			}
		},

		async isType() {
			for (const type of this.bussinessType) {
				try {
					const res = await cloudDB.loginBussines(store.userInfo._id, type);
					this.btnStatus[type] = res.code;
					console.log('.....', JSON.stringify(this.btnStatus));
				} catch (e) {
					return false;
				}
			}
		},

		async handleBtn(type) {
		const isToken=	uni.getStorageSync('uni-id-pages-userInfo')
		if(Object.keys(isToken).length===0){
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
			});
			return
			
		}
		   const auditStatusMap={
			   applyed:'申请中',
			   audited:"已审核",
			   paused:'已歇业'
		   }	
			try {
				const r = await cloudDB.getOwnership(this.userInfo._id, type);
				console.log(JSON.stringify(r));
				if (!r.code) {
			      uni.navigateTo({
						url: this.regUrls[type]
					});
				}else if(r.code&&r.data[0].auditStatus==="audited"){
					uni.navigateTo({
						url: `/pages/index/index?module=${type}`
					});
					
			}else if(r.code&&r.data[0].auditStatus!=="audited"){
				uni.showModal({
					title:'提示',
					content:`你申请的仓库${r.data[0].warehouse_name}处于${auditStatusMap[r.data[0].auditStatus]}状态，如有疑问请致电客服咨询`
				})
				
			}else{
				uni.showModal({
					title:'暂无授权'
				})
			}
			} catch (error) {
				console.error('业务登录失败:', error);
				uni.showToast({
					title: '系统繁忙，请稍后再试',
					icon: 'error'
				});
			}
		},

		switchTab(tab) {
			this.currentTab = tab;
			console.log(this.currentTab);
		},
		hangdleLogin() {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/login/login-withpwd'
			});
		},
		handerUserInfo() {
			uni.navigateTo({
				url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo'
			});
			this.popupshow = false;
		},

		popshow() {
			this.popupshow = true;
			setTimeout(() => {
				this.popupshow = false;
			}, 3000);
		},
		handleIndex() {
			uni.showModal({
				title: '您尚未被授权',
				content: '请联系您的服务商'
			});

			// uni.navigateTo({
			// 	url:'/pages/index/index'
			// })
		},
		loginout() {
			uni.showModal({
				title: '确认退出',
				success(res) {
					if (res.confirm) {
						mutations.logout();
					}
				}
			});
			this.popupshow = false;
		},
		async handleFeed() {
			const _this = this;
			uni.showLoading({
				title: '提交中....'
			});
			if (!checkTelePhone(this.contact.telephone)) {
				return;
			}
			try {
				const rr = await cloudDB.addDB('contact', this.contact);
				if (rr.code) {
					uni.showModal({
						title: '留言成功',
						content: '工作人员将在24小时之内联系您，请注意接听电话',
						success(res) {
							if (res.confirm) {
								(_this.contact = {
									name: '',
									telephone: '',
									content: ''
								}),
									this.$nextTick(() => {
										_this.switchTab('home');
									});
							}
						}
					});
				} else {
					uni.showToast({
						icon: 'error',
						title: '失败，稍后再试'
					});
				}
			} catch (e) {
				console.log(e);
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f8f9fa;
	margin-top: 80px;
}
.username-container {
	position: relative; /* 作为弹窗的定位容器 */
	display: inline-block;
}

.username {
	display: flex;
	align-items: center;
	gap: 8rpx; /* 文字与图标间距 */
	padding: 0 16rpx;
	cursor: pointer;
}

.popup {
	position: absolute; /* 相对于父容器定位 */
	top: 100%; /* 紧贴用户名下方 */
	right: 0;
	min-width: 180rpx;
	background-color: #fff;
	border-radius: 8rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 阴影效果 */
	z-index: 999; /* 确保弹窗在最上层 */
	margin-top: 8rpx;
}
.btncolor{
	background-color: #9a9a00;
}
.popup_item {
	padding: 16rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
	border-bottom: 1rpx solid #f5f5f5; /* 分隔线 */

	&:last-child {
		border-bottom: none;
	}

	&:active {
		background-color: #f5f5f5; /* 点击反馈 */
	}
}
/* 导航栏样式 */
.nav-bar {
	display: flex;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	justify-content: space-between;
	align-items: center;
	height: 80px;
	z-index: 99;
	background-color: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
	margin-left: 50rpx;
	width: 200rpx;
	padding: 20rpx 20rpx;

	image {
		width: 400rpx;
	}
}

.nav-items {
	display: flex;
}

.nav-item {
	margin: 0 20px;
	padding: 10px 0;
	font-size: 16px;
	color: #666666;
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

.nav-item.active {
	color: #165dff;
	border-bottom-color: #165dff;
}

/* 轮播图样式 */
.banner {
	width: 100%;
	height: 400px;
}

.banner image {
	width: 100%;
	height: 100%;
}

/* 通用样式 */
.section-title {
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #333333;
	margin: 60px 0 40px 0;
}

.more-btn {
	display: inline-block;
	padding: 10px 20px;
	margin-top: 20px;
	color: #165dff;
	border: 1px solid #165dff;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.more-btn:hover {
	background-color: #165dff;
	color: #ffffff;
}

/* 公司简介样式 */
.about-section {
	padding: 0 40px;
}

.section-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-content image {
	width: 50%;
	height: 400px;
	border-radius: 8px;
}

.about-text {
	width: 45%;
}

.login {
	display: flex;
	height: 100%;
	width: 500rpx;
	margin-right: 0rpx;
	position: relative;

	.login_btn {
		display: flex;
		position: absolute;
		right: 100rpx;
		bottom: 5rpx;
		padding: 5rpx 20rpx;
		align-items: center;
		justify-content: center;
		height: 60rpx;
		border-radius: 30rpx;
		color: #ffffff;
		cursor: pointer;
		background-color: #165dff;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.login_info {
		position: absolute;
		right: 100rpx;
		bottom: 5rpx;
		display: flex;
		gap: 30rpx;

		image {
			width: 60rpx;
			height: 60rpx;
		}

		.exit {
			font-size: 28rpx;
			color: #165dff;
		}
	}
}

.btn_box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 30rpx;
	font-size: 28rpx;
	border-radius: 25rpx;
	font-weight: bold;
	cursor: pointer;
	color: white;
	background-color: #165dff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.about-title {
	font-size: 24px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20px;
}

.about-desc {
	font-size: 16px;
	color: #666666;
	line-height: 1.8;
	margin-bottom: 20px;
}

/* 产品服务样式 */
.products-section {
	padding: 0 40px;
}

.products-container {
	display: flex;
	justify-content: space-between;
}

.product-card {
	width: 32%;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: all 0.3s ease;
}

.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-card image {
	width: 100%;
	height: 200px;
}

.product-title {
	display: flex;
	justify-content: space-between;
	font-size: 18px;
	font-weight: bold;
	color: #333333;
	padding: 15px;
}

.product-desc {
	font-size: 14px;
	color: #666666;
	padding: 0 15px 15px 15px;
}

/* 新闻动态样式 */
.news-section {
	padding: 0 40px;
}

.news-container {
	display: flex;
	justify-content: space-between;
}

.news-item {
	width: 48%;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
}

.news-item image {
	width: 30%;
	height: 150px;
}

.news-content {
	width: 70%;
	padding: 15px;
}

.news-title {
	font-size: 18px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 10px;
}

.news-date {
	font-size: 14px;
	color: #999999;
	margin-bottom: 10px;
}

.news-desc {
	font-size: 14px;
	color: #666666;
	line-height: 1.5;
}

/* 联系我们样式 */
.contact-section {
	padding: 0 40px;
}

.contact-container {
	display: flex;
	justify-content: space-between;
}

.contact-info {
	width: 45%;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 30px;
}

.contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}

.contact-icon {
	width: 40px;
	height: 40px;
	background-color: #165dff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20px;
}

.contact-icon .iconfont {
	color: #ffffff;
	font-size: 20px;
}

.contact-text {
	font-size: 16px;
	color: #333333;
}

.contact-form {
	width: 45%;
	background-color: #ffffff;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 30px;
}

.form-title {
	font-size: 20px;
	font-weight: bold;
	color: #333333;
	margin-bottom: 20px;
}

.form-input {
	width: 100%;
	height: 40px;
	margin-bottom: 20px;
	padding: 0 10px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

.form-textarea {
	width: 100%;
	height: 120px;
	margin-bottom: 20px;
	padding: 10px;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
}

.submit-btn {
	width: 100%;
	height: 40px;
	background-color: #165dff;
	color: #ffffff;
	border-radius: 4px;
	border: none;
	cursor: pointer;
}

/* 页脚样式 */
.footer {
	width: 100vw;
	background-color: #333333;
	color: #ffffff;
	padding: 10px;
	margin-top: 20px;
}

.footer-content {
	display: flex;

	width: 100%;
	justify-content: center;
	margin-bottom: 10px;
}

.footer-logo {
	width: 300rpx;
	height: 100rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.footer-nav {
	display: flex;
}

.footer-nav-item {
	margin-right: 30px;
	cursor: pointer;
}

.footer-social {
	display: flex;
}

.social-icon {
	width: 30px;
	height: 30px;
	background-color: #444444;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	cursor: pointer;
}

.social-icon .iconfont {
	font-size: 16px;
}

.copyright {
	text-align: center;
	font-size: 14px;
	color: #999999;
}
</style>
